<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head lang="zh-CN">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>E安全(人脸识别门禁)</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--<link rel="stylesheet" type="text/css" href="styles.css">-->
	<link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="${basePath}/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		//消息状态
		$(document).ready(function(){
			var num=document.getElementById("userid").value;
			$.ajax({
				url:"${basePath}/u/selectMsg",
				type:"get",
				data:{id:num},
				success:function(data){
					console.log(data);
					if(data==1){
						$("[name='checkbox']").attr("checked",'true'); //开启
					}else{
						$("[name='checkbox']").removeAttr("checked");  //取消
					}
				}
			});
		});
		//消息设置
		function msgSet(){
				var num=document.getElementById("userid").value;
				var $box= document.getElementById('togglebutton');
				if($box.checked === true){
     				$.ajax({
     					url:"${basePath}/u/msgSet",
     					type:"post",
     					data:{
     						userid:num,
     						messageset:0
     					}
     				});
				}else{
				    $.ajax({
     					url:"${basePath}/u/msgSet",
     					type:"post",
     					data:{
     						userid:num,
     						messageset:1
     					}
     				});
				}
			}
	</script>
	<style type="text/css">
		#togglebutton{ display:none;}
		.image1{
	        width:80px;
	        height:80px;
	        border-radius:200px;
    	}
    	#imghead1{
    		width:80px;
	        height:80px;
	        border-radius:200px;
    	}
		.round {
		   border: 5px solid #dedede;
		   -moz-border-radius: 10px;      /* Gecko browsers */
		   -webkit-border-radius: 10px;   /* Webkit browsers */
		   border-radius:10px;            /* W3C syntax */
		}
        .button-label{
            position: relative;
            display: inline-block;
            width: 80px;
            height: 30px;
            background-color: #ccc;
            box-shadow: #ccc 0px 0px 0px 2px;
            border-radius: 30px;
            overflow: hidden;
        }
        .circle{
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fff;
        }
        .button-label .text {
            line-height: 30px;
            font-size: 18px;
            text-shadow: 0 0 2px #ddd;
        }
        .on { color: #fff; display: none; text-indent: 10px;}
        .off { color: #fff; display: inline-block; text-indent: 34px;}
        .button-label .circle{
            left: 0;
            transition: all 0.3s;
        }
        #togglebutton:checked + label.button-label .circle{
            left: 50px;
        }
        #togglebutton:checked + label.button-label .on{ display: inline-block; }
        #togglebutton:checked + label.button-label .off{ display: none; }
        #togglebutton:checked + label.button-label{
            background-color: #00e266;
	</style>
	<script type="text/javascript">
			function homePage(){
				var userid=document.getElementById("userid").value;
				var yphone=document.getElementById("yphone").value;
				window.location.href="${basePath}/p/doyoupayfor?userid="+userid+"&yphone="+yphone;
			}
			function systemMassage(){
				var userid=document.getElementById("userid").value;
				window.location.href="${basePath}/u/Jumpdoor?userid="+userid;
			}
			function buy(){
				var userid=document.getElementById("userid").value;
				var yphone=document.getElementById("yphone").value;
				window.location.href="${basePath}/u/JumpBuy?userid="+userid+"&yphone="+yphone;
			}
			function serivce(){
				var userid=document.getElementById("userid").value;
				window.location.href="${basePath}/p/payShow?userid="+userid;
			}
			//人脸检测图片上传预览1
         	function previewImage1(file){
	         	var files = $("#filepath1").prop("files");
	         	var formData =new FormData();
	         	formData.append("file",files[0]);
	         	var filepath1=document.getElementById('filepath1').value;		//获取文件路径
	         	var newfilepath1 =filepath1.substring(filepath1.indexOf('.'));
	         	var jpg='.jpg',png='.png',jpeg='.jpeg',gif='.gif';
	         	if(jpg == newfilepath1 || png==newfilepath1 || jpeg == newfilepath1 || gif==newfilepath1){
	         		$.ajax({
	  					url:"${basePath}/face/detection",
	  					fileElementId:"filepath1",
	  					data:formData,
	  					type:"post",
	  					async:false,
	  					processData:false,
	  					contentType:false,
	  					success:function(date){
	  					var s=JSON.parse(date);
	  					if(s.error_message=="CONCURRENCY_LIMIT_EXCEEDED"){
	  						alert("系统上传有误，请重试");
	  					}else if(s.faces.length == 0){
	  						alert("不是人脸图片");
	  						document.getElementById('filepath1').value="";	//清除图片路径
	  					}else if(s.faces.length>=1){
				          	var div = document.getElementById('preview1');
				          	if (file.files && file.files[0]){
					            div.innerHTML ='<img id=imghead1>';
					            var img = document.getElementById('imghead1');
					            img.onload = function(){
				                var rect = clacImgZoomParam(80, 80, img.offsetWidth, img.offsetHeight);
				                img.width  =  rect.width;
				                img.height =  rect.height;
				                img.style.marginTop = rect.top+'px';
				           	};
					            var reader = new FileReader();
					            reader.onload = function(evt){
					            img.src = evt.target.result;
					        };
					            reader.readAsDataURL(file.files[0]);
				          	}else{//兼容IE
					            file.select();
					            var src = document.selection.createRange().text;
					            div.innerHTML = '<img id=imghead>';
					            var img = document.getElementById('imghead');
					            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
					            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
					            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
					            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
				          	}
	  					}
	  					},
	  					error:function(date){
	  				}
	  			});
	         	}else{
	         		alert("不是图片");
	         		document.getElementById('filepath1').value="";
	         	}
	        }
			function clacImgZoomParam( maxWidth, maxHeight, width, height ){
	            var param = {top:0, left:0, width:width, height:height};
	            if( width>maxWidth || height>maxHeight ){
	                rateWidth = width / maxWidth;
	                rateHeight = height / maxHeight;
	                if( rateWidth > rateHeight ){
	                    param.width =  maxWidth;
	                    param.height = Math.round(height / rateWidth);
	                }else{
	                    param.width = Math.round(width / rateHeight);
	                    param.height = maxHeight;
	                }
	            }
	            param.left = Math.round((maxWidth - param.width) / 2);
	            param.top = Math.round((maxHeight - param.height) / 2);
	            return param;
       	 }
	</script>
  </head>
  <body>
  	<div class="container-fluid">
      <div class="row">
      	<input type="hidden" id="userid" value="${userid!}">
      	<input type="hidden" id="yphone" value="${yphone!}">
     	<table border="0px solid red" width="100%" height="100%">
     		<tr height="15%" align="center" style="background:url(${basePath}/csh/image/e_image.jpg);background-size:100%;" >
     			<td colspan="3">
	     			<div style="text-align: center; padding-bottom: 18px;">
			    		<label>
			   		 		<input type="file" disabled="disabled"  name="filepath" id="filepath1"  value="" onchange="previewImage1(this)" style="display: none;" />
							    <div id="preview1">
								    <img id="imghead1" src="${yfilename!}">
							    </div>
						</label>
    				</div>
     			</td>
     		</tr>
     		<tr height="2%">
     			<td colspan="3" style="background-color: #edeff0;"></td>
     		</tr>
     		<tr height="10%" align="center">
     			<td colspan="3">
	     				<div style="float: left; border: 0px red solid; width: 10%; margin-left: 5%; padding-top:10px; padding-bottom:4px; text-align: center;"><img alt="" src="${basePath}/csh/image/my_massage.jpg" style="border: 0px red solid; height: 20px; width: 20px;"></div>
	     				<div style="float: left; border: 0px red solid; width: 60%; padding-top:8px; padding-bottom:8px; text-align: left;">消息设置</div>
	     				<div style="float: left; border: 0px red solid; width: 20%; padding-top:5px; padding-bottom:5px; text-align: right; color: #abb5b8;" >
	     					<div class="togglebutton-wrapper">
							    <input type="checkbox" id="togglebutton" name="checkbox">
							    <label for="togglebutton" class="button-label" onclick="msgSet()">
							        <span class="circle"></span>
							        <span class="text on"></span>
							        <span class="text off"></span>
							    </label>
							</div>
	     				</div>
     					<br/><br/><br/>
     					<div style="border: 1px #bbbbbb solid; margin-left: 5%; margin-right: 5%;"></div>
     			</td>
     		</tr>
     		<tr height="10%" align="center">
     			<td colspan="3" onclick="buy()">
	     				<div style="float: left; border: 0px red solid; width: 10%; margin-left: 5%; padding-top:10px; padding-bottom:4px; text-align: center;"><img alt="" src="${basePath}/csh/image/my_buy.jpg" style="border: 0px red solid; height: 20px; width: 20px;"></div>
	     				<div style="float: left; border: 0px red solid; width: 60%; padding-top:8px; padding-bottom:8px; text-align: left;">授权购买</div>
	     				<div style="float: left; border: 0px red solid; width: 20%; padding-top:10px; padding-bottom:4px; text-align: right; color: #abb5b8;"><img alt="" src="${basePath}/csh/image/arrow.jpg" style="border: 0px red solid; height: 20px; width: 20px;"></div>
     					<br/><br/><br/>
     					<div style="border: 1px #bbbbbb solid; margin-left: 5%; margin-right: 5%;"></div>
     			</td>
     		</tr>
     		<tr height="10%" align="center">
     			<td colspan="3" onclick="serivce()">
	     				<div style="float: left; border: 0px red solid; width: 10%; margin-left: 5%; padding-top:5px; padding-bottom:4px; text-align: center;"><img alt="" src="${basePath}/csh/image/my_service.jpg" style="border: 0px red solid; width: 30px; height: 30px;"></div>
	     				<div style="float: left; border: 0px red solid; width: 60%; padding-top:8px; padding-bottom:8px; text-align: left;">已购服务</div>
	     				<div style="float: left; border: 0px red solid; width: 20%; padding-top:10px; padding-bottom:4px; text-align: right; color: #abb5b8;"><img alt="" src="${basePath}/csh/image/arrow.jpg" style="border: 0px red solid; height: 20px; width: 20px;"></div>
     					<br/><br/><br/>
     					<div style="border: 1px #bbbbbb solid; margin-left: 5%; margin-right: 5%;"></div>
     			</td>
     		</tr>
     		<tr height="10%" align="center">
     			<td colspan="3" onclick="systemMassage()">
	     				<div style="float: left; border: 0px red solid; width: 10%; margin-left: 5%; padding-top:10px; padding-bottom:4px; text-align: center;"><img alt="" src="${basePath}/csh/image/my_massage.jpg" style="border: 0px red solid; width: 20px; height: 20px;"></div>
	     				<div style="float: left; border: 0px red solid; width: 60%; padding-top:8px; padding-bottom:8px; text-align: left;">消息记录</div>
	     				<div style="float: left; border: 0px red solid; width: 20%; padding-top:10px; padding-bottom:4px; text-align: right; color: #abb5b8;"><img alt="" src="${basePath}/csh/image/arrow.jpg" style="border: 0px red solid; height: 20px; width: 20px;"></div>
     					<br/><br/><br/>
     					<div style="border: 1px #bbbbbb solid; margin-left: 5%; margin-right: 5%;"></div>
     			</td>
     		</tr>
     		<tr height="27%">
     			<td colspan="3" style="background-color: #edeff0;"></td>
     		</tr>
     		<tr height="8%">
     			<td colspan="3">
     					<div style="border: 0px #f3f3f3 solid;" ></div>
	     				<div style="float: left; border: 0px red solid; width: 45%; margin-left: 5%; text-align: center; font-size: 10px;" onclick="homePage()"><img alt="" src="${basePath}/csh/image/homePageBlack.jpg"><br>主页</div>
	     				<div style="float: left; border: 0px red solid; width: 45%; text-align: center; color: #27a2f0; font-size: 10px;"><img alt="" src="${basePath}/csh/image/my.jpg"><br>我的</div>
     			</td>
     		</tr>
     	</table>
      </div>
    </div>
  </body>
</html>
